<script setup>
import { ref, computed, watch, onUnmounted } from "vue";
import { downloadApp, getWxCode } from "@/api/base";
const timeLineIndex = ref(0);

const app = ref([]);
const getApp = async () => {
  try {
    const res = await downloadApp();
    app.value = res.data;
  } catch (err) {
    console.log(err);
  }
};
getApp();
const wxCode = computed(() => {
  if (!app.value.length) return "";
  return app.value.find((item) => item.type === 3)?.qrCode;
});
const wxPic = ref("");
const getWxCodeFN = async () => {
  try {
    const res = await getWxCode();
    wxPic.value = res.data.wxPic;
    if (res.data.bind === 1) {
      timeLineIndex.value = 2;
    }
  } catch (err) {
    console.log(err);
  }
};
getWxCodeFN();
// 定时器检查绑定状态
const timer = ref();
watch(timeLineIndex, (newVal) => {
  if (newVal === 1) {
    timer.value = setInterval(() => {
      getWxCodeFN();
      if (timeLineIndex.value === 2) {
        clearInterval(timer.value);
      }
    }, 3000);
  }
});

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<template>
  <div class="binding-notification">
    <div class="box">
      <h4 class="title">绑定微信消息通知</h4>
      <p class="tips">
        绑定微信消息通知后，1分钟内的某个用户首次给你发消息时，会从公众号推送新消息提醒，方便掌握最新的消息通知
      </p>
      <div class="time-line">
        <div class="time" :class="{ active: timeLineIndex >= 0 }">
          <span class="ro"></span>
          <span class="text">关注公众号</span>
          <span class="line"></span>
        </div>
        <div class="time" :class="{ active: timeLineIndex >= 1 }">
          <span class="ro"></span>
          <span class="text">微信扫码绑定</span>
          <span class="line"></span>
        </div>
        <div class="time" :class="{ active: timeLineIndex >= 2 }">
          <span class="ro"></span>
          <span class="text">完成</span>
        </div>
      </div>
      <template v-if="timeLineIndex === 0">
        <p class="scan-title">微信扫描下方二维码，关注有声探网络科技公众号</p>
        <div class="qr-code">
          <img :src="wxCode" alt="" />
        </div>
        <span class="next-btn" @click="timeLineIndex = 1">已关注，下一步</span>
      </template>
      <template v-if="timeLineIndex === 1">
        <p class="scan-title">
          绑定微信消息通知，微信扫描绑定二维码，在手机端进行绑定
        </p>
        <div class="qr-code">
          <img :src="wxPic" alt="" />
        </div>
      </template>
      <template v-if="timeLineIndex === 2">
        <div class="img">
          <img class="bind-success" src="@/assets/success-img.png" alt="" />
        </div>
        <p class="scan-title" style="padding-bottom: 150px">
          消息通知已经绑定成功
        </p>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.binding-notification {
  padding-top: 112px;
  padding-bottom: 32px;
  background: #f9f9f9;
  box-sizing: border-box;
  min-height: calc(100vh - 380px);
}
.box {
  width: 1104px;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px 24px;
  box-sizing: border-box;
  .title {
    font-size: 20px;
    color: #191e28;
    margin-bottom: 6px;
  }
  .tips {
    color: rgba(25, 30, 40, 0.6);
  }
  .time-line {
    display: flex;
    margin-top: 38px;
    margin-bottom: 30px;
    padding: 0 40px;
    .time {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        flex: 0 0 auto;
      }
      &.active {
        .ro {
          background: #1dbf73;
        }
        .text {
          color: #1dbf73;
          font-weight: bold;
        }
      }
      .ro {
        width: 12px;
        height: 12px;
        border: 1px solid rgba(25, 30, 40, 0.12);
        border-radius: 100%;
        margin-right: 8px;
        position: relative;
        &:after {
          width: 10px;
          height: 10px;
          content: "";
          display: inline-block;
          border: 1px solid #fff;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .text {
        color: #191e28;
        font-size: 16px;
      }
      .line {
        flex: 1;
        border-top: 1px dotted rgba(25, 30, 40, 0.12);
        margin: 0 10px;
      }
    }
  }
  .scan-title {
    font-size: 16px;
    color: #191e28;
    font-weight: bold;
    text-align: center;
    margin-bottom: 48px;
  }
  .qr-code {
    width: 240px;
    height: 240px;
    background: rgba(25, 30, 40, 0.02);
    border-radius: 20px 20px 20px 20px;
    border: 1px solid rgba(25, 30, 40, 0.08);
    margin: 0 auto 32px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .next-btn {
    display: block;
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    margin: 0 auto 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 48px;
    color: #fff;
  }
  .img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 16px;
  }
  .bind-success {
    width: 80px;
    height: 80px;
    margin: 0 auto;
  }
}
</style>